<template>
  <el-dialog
    class="custom-dialog"
    v-model="dialogVisible"
    title="添加检查点"
    width="1200px"
    @close="handleClose"
  >
    <div class="custom-table-list-wrapper">
      <div class="custom-detail">
        <el-row :gutter="20">
          <el-col :span="12">
            <span class="label">检查人员:</span>
            <span class="value">
              {{ form.defaultUserName }}
            </span>
          </el-col>
          <el-col :span="6">
            <span class="label">操作人员:</span>
            <span class="value">{{ form.actualUserName }}</span>
          </el-col>
          <el-col :span="6">
            <span class="label">操作时间:</span>
            <span class="value">{{ form.operateTime }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <span class="label">人员照片:</span>
            <span class="value">
              <FileList fileType="picture" :list="form.imageFiles" />
            </span>
          </el-col>
        </el-row>
      </div>
      <div class="content">
        <div class="content-table">
          <el-table class="custom-table" ref="tableRef" :data="form.items">
            <el-table-column type="index" label="序号" width="80" />
            <el-table-column
              prop="itemTypeName"
              label="检查项目类型"
              width="120"
            />
            <el-table-column
              prop="content"
              label="检查内容"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              prop="senceName"
              label="现场照片"
              :show-overflow-tooltip="true"
              ><template #default="{ row }">
                <el-image
                  class="image"
                  v-for="(item, index) in row.imageFiles"
                  :key="index"
                  :src="item.fileUrl"
                  fit="cover"
                  :preview-src-list="
                    row.imageFiles.map((i) => {
                      return i.fileUrl
                    })
                  "
                  preview-teleported
                  :initial-index="index"
                />
              </template>
            </el-table-column>
            <el-table-column prop="status" label="是否存在隐患" width="120">
              <template #default="scope">
                {{ scope.row.status == 1 ? '否' : '是' }}
              </template>
            </el-table-column>
            <el-table-column
              prop="issueDesc"
              label="隐患描述"
              :show-overflow-tooltip="true"
            />
            <el-table-column label="是否已整改" prop="isRepair" width="100">
              <template #default="scope">
                {{ scope.row.isRepair == 1 ? '是' : '否' }}
              </template>
            </el-table-column>
            <el-table-column
              prop="repairImageFiles"
              label="整改图片"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row }">
                <el-image
                  class="image"
                  v-if="row.repairImgFile"
                  :preview-src-list="
                    [row.repairImgFile].map((i) => {
                      return i.fileUrl
                    })
                  "
                  fit="cover"
                  :src="row.repairImgFile.fileUrl"
                  preview-teleported
                />
              </template>
            </el-table-column>
            <el-table-column
              prop="unRepairDesc"
              label="未整改原因"
              :show-overflow-tooltip="true"
            />
          </el-table>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue'
import { useDict } from '@/hooks/useDict'
import { getTaskItem } from '@/api/manager/inspectionManage/taskManage.js'
import FileList from '@/components/fileList/index.vue'

const { dict, getDictValue, getDictStyle } = useDict()
const searchParams = ref({})

const tableRef = ref()
const dialogVisible = ref(false)
const handleClose = () => {
  form.value = {
    imageFiles: [],
    items: [],
  }
  dialogVisible.value = false
}

const form = ref({
  imageFiles: [],
  items: [],
})
const handleDetail = async () => {
  const res = await getTaskItem(searchParams.value)
  form.value = res.data
}

watch(
  () => dialogVisible.value,
  () => {
    if (dialogVisible.value) {
      handleDetail(1)
    }
  },
  {
    immediate: true,
    deep: true,
  },
)
defineExpose({ dialogVisible, searchParams })
onMounted(() => {})
</script>
<style lang="scss" scoped>
@import '@/assets/styles/table.scss';
.select {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin-bottom: 10px;
  span {
    color: #333333;
    font-size: 14px;
    margin-right: 10px;
  }
}
.search {
  padding: 0;
  margin: 0;
  box-shadow: none;
  height: auto;
}
.content {
  padding: 0;
}
.image {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
</style>
